<template>
	<view class="coverFull">
		<image style="filter: blur(5px);" class="coverFull" src="../../static/img/yindao.jpg"></image>
		<view class="l-w">
			<!-- <button  type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">微信登录</button> -->
			<!-- <view>{{message}}</view> -->
		</view>
		<view v-show="maskShow" class="mask" @click.stop="">
			<view class="registbox" @click.stop="">
				<view class="title">绑定账号</view>
				<view class="bottom">
					<view class="input-w">
						<text class="lable">账号：</text>
						<input v-model="ack.name" maxlength="20" class="myinput" />
					</view>
					<view class="input-w">
						<text class="lable">密码：</text>
						<input password maxlength="20" v-model="ack.password " class="myinput" />
					</view>
					<view class="input-w" style="margin-bottom: 0;">
						<button class="btn" @click="bindmessage" >确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getOpenId,checkLogin,bindMessage} from '@/api/homeapi'
	export default{
		data(){
			return{
				openId:'',
				maskShow:false,
				ack:{
					password :'',
					name:'',
				},
				userinfo:{},
				message:888
			}
		},
		onLoad() {
			this.$fn.loading(10)
			this.getOpenid()
		},
		methods:{
			getUserInfo(e){
				console.log(e);
				// this.$fn.loading(10)
				this.userinfo = e.detail.userInfo
				this.getOpenid()
			},
			getOpenid(){
				uni.login({
				  provider: 'weixin',
				  success:loginRes=> {
				    console.log(loginRes);
					getOpenId({code:loginRes.code}).then(res=>{
						console.log(res);   
						// this.openId = res.data
						if(!res.errMsg){   
							this.openId = res.data
							this.checklogin()
						}else{
							this.$fn.toast('请求错误')
							uni.hideLoading()
						}
					}).catch(err=>{
						uni.hideLoading()
						console.log(err);
						this.$fn.toast('请求错误')
					})
				  },
				  fail:(err) => {
				  	this.$fn.toast(JSON.stringify(err))
				  }
				});
			},
			checklogin(){
				checkLogin({openId:this.openId}).then(res=>{
					console.log(res);
					if(res.data){
						let info = {...this.userinfo,...res.data,...{openId:this.openId}}
						uni.setStorageSync('userInfo',info)
						this.$Store.userInfo = info
						setTimeout(()=>{
							this.$Router.replace({name:'home'})
							uni.hideLoading()
						},1000)
					}else{
						this.maskShow = true
						uni.hideLoading()
					}
				})
			},
			bindmessage(){
				
				bindMessage({...this.ack,...{openid:this.openId}}).then(res=>{
					console.log(res);
					if(res.data){
						let info = {...this.userinfo,...res.data,...{openId:this.openId}}
						uni.setStorageSync('userInfo',info)
						this.$Store.userInfo = info
						setTimeout(()=>{
							this.$Router.replace({name:'home'})
							uni.hideLoading()
						},1000)
					}else{
						uni.hideLoading()
						this.$fn.toast(res.description)
						
					}
					
				})
			}
			
		}
	}
</script>

<style lang="scss" coped>
	.l-w{
		width: 70%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%);
	}
	.mask{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0,0,0,.7);
		z-index: 99;
		.registbox{
			width: 80%;
			background: #fff;
			margin: 0 auto;
			transform: translateY(80%);
			overflow: hidden;
			border-radius: 8px;
			
			.title{
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 15px 0;
				background: #4d98fa;
				font-size: 14px;
				font-weight: bold;
				color: #fff; 
			}
			.bottom{ 
				padding: 25px 15px 25px;
			};
			.mbottom0{
				margin-bottom: 0;
			}
			.input-w{
				width: 100%;
				display: flex;
				align-items: center;
				margin-bottom: 25px;
				.lable{
					font-size: 16px;
					color:#363636;
				}
				.myinput{
					height: 32px;
					padding: 3px 10px;
					flex: 1;
					background: #eeeeee;
					border-radius: 8px;
					font-size: 16px;
				}
					
				.btn{
					width:80%;
					height: 35px;
					background: #FF9900;
					color: #fff;
					display: flex;
					align-items: center;
					font-size: 14px;
					justify-content: center;
					transform: translateX(10%);
					&:active{
						background: #df8600;
					}
				}
			}
		}
	}
</style>
